import React from 'react';
import { createModalContainer } from '../../../components/changeModal';
import {Button,Input,Form , Icon, message} from 'antd';
import styles from './index.less';
import SelectedImage from '@/components/plugins/selectImage/index';
import InputText from '@/components/Input/index';
import { connect } from 'dva';
const FormItem = Form.Item;

@Form.create()
class Component extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        imageUrl: '',
        isFetching: false,
      }
  }

  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }

  // 图片插件
  imgModal = ref => {
    this.imgmodal = ref;
  };
  OpenImageModal = () => {
    this.imgmodal.handleShowModal();
  };
  onImageChange = res => {
    this.setState({
      imageUrl: res.imageUrl.substr(res.imageUrl.indexOf('.com/') + 5),
      width: res.width,
      height: res.height
    });
    this.imgmodal.handleModalVisible();
  };

    //取消
    handleCancel =() => {
    this.props.cancel();
    }

    onTextChange = (v) => {
        this.setState({ name: v.target.value  });
    }

            // 添加一级
            clickAddFirstGroup = data => {
                const { dispatch } = this.props;

            }

    //提交
    handleSubmit =e => {
        e.preventDefault();
        const {imageUrl, width, height} = this.state;   
        const { dispatch } = this.props;  
        this.props.form.validateFields(async (err, values) =>{
        if(!err) {
            dispatch({
                type: 'productClassify/CreateFirstGroup',
                payload: {
                    name: values.name,
                    imgPath: imageUrl,
                    width: width,
                    height: height,
                },
                callBack: {
                    success: res => {
                        if(res.Code === 0) {
                            message.success('添加成功');
                            this.props.ok();
                        }
                    },
                    error: res => {
                        message.error(res.Msg, 2);
                    },
                }
            })
       }})
    }

    render() {
      const {getFieldDecorator} = this.props.form;
      const {loading1} = this.props;
      const formItemLayout = {
        labelCol: {
          span: 6 ,
        },
        wrapperCol: {
          span: 8 ,
        },
      };
        return (
            <div style={{marginTop: 24}}>
                <SelectedImage onRef={this.imgModal} selectImage={this.onImageChange} />
                <Form onSubmit={this.handleSubmit}>
                    <FormItem label="分类名称" {...formItemLayout}>
                        {getFieldDecorator('name', {
                            rules: [
                                {required: true, message: '分类名不能为空，最多6个字'},
                                {pattern: /^.{1,6}$/, message: '分类名不能为空，最多6个字'}
                            ],
                            validateTrigger: 'onBlur',
                        })(
                            <InputText name="name" onChange={this.onTextChange}  showtotal maxLength={6} autoFocus/>
                        )}
                    </FormItem>
                    <FormItem label="banner图" className={styles.coverBox} {...formItemLayout}>
                        {getFieldDecorator('url', {
                            rules: [
                                {required: false, message: '分类图不能为空'},
                            ]
                        })(
                            <div>
                               <div className={styles.uploadCover} onClick={this.OpenImageModal}>
                                    {this.state.imageUrl ? (
                                        <img
                                        src={
                                            this.props.param.oemInfo &&
                                            this.props.param.oemInfo['cdnUrl'] + '/' + this.state.imageUrl+'?x-oss-process=style/240'
                                        }
                                        style={{ width: '100%', height: '100%' }}
                                        />
                                    ) : (
                                        <Icon type="plus" />
                                    )}
                              </div>
                              <div style={{lineHeight: '16px', height: '16px'}}>建议尺寸850*410像素</div>
                            </div>                 
                        )}
                    </FormItem>
                    <FormItem className="xkd-model-footBtn">
                        <Button onClick={this.handleCancel} style={{marginRight: 8}}>
                            取消
                        </Button>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={loading1}
                        >
                            保存
                        </Button>
                    </FormItem>
                </Form>
           </div>
        )
    }
}

const OneType = createModalContainer(
    connect(({productClassify,global, loading}) => ({
        oemInfo: global.oemInfo,
        loading1: loading.effects['productClassify/CreateFirstGroup'],
    }))(Component),
    true,
    true
);

export default OneType;
